<!DOCTYPE html>
<html  theme="system"  lang="en">
  <head>
<title>vue-touch-ripple | Homepage</title>
<meta name="twitter:widgets:new-embed-design" content="on">
<meta name="color-scheme" content="light dark">
<meta name="keywords" content="vue-touch-ripple examples,How to use vue-touch-ripple">
<meta name="description" content="vue-touch-ripple GitHub homepage">
<meta property="og:url" content="https://github.surmon.me/vue-touch-ripple">
<meta property="og:image" content="https://opengraph.githubassets.com/1723926138264/surmon-china/vue-touch-ripple">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="600">
<meta name="twitter:site" content="@surmon7788">
<meta name="twitter:creator" content="surmon7788">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="vue-touch-ripple | Homepage">
<meta name="twitter:image" content="https://opengraph.githubassets.com/1723926138264/surmon-china/vue-touch-ripple">
<meta name="twitter:description" content="vue-touch-ripple GitHub homepage">
<meta property="og:site_name" content="Surmon's open-source projects">
<meta property="og:type" content="object">
<meta property="og:title" content="vue-touch-ripple | Homepage">
<meta property="og:description" content="vue-touch-ripple GitHub homepage">
<meta property="og:image:alt" content="vue-touch-ripple GitHub homepage">
    <meta charset="UTF-8" />
    
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
    <link rel="icon" type="image/svg+xml" href="/favicons/favicon.svg" />
    <link rel="alternate" type="image/png" href="/favicons/favicon.png" />
    <link rel="mask-icon" href="/favicons/pinned-octocat.svg" color="#000000" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Google search console -->
    <meta name="google-site-verification" content="CNWDKal1HwPI4bIhG5jkySW65FQxwPmYGt7K_gqjY38" />
    <!-- Google analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-WNSSKPKKMG"></script>
    <script>
      window.dataLayer = window.dataLayer || []
      function gtag() {
        dataLayer.push(arguments)
      }
      gtag('js', new Date())
      gtag('config', 'G-WNSSKPKKMG')
    </script>
    <script type="module" crossorigin src="/assets/index-DtbE5QCi.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/style-CqmeC_X-.css">
  </head>
  <body >
    <div id="app"><div class="vue-renderer" data-v-7c10dc62><header class="navbar" data-v-7c10dc62 data-v-678f463b><div class="container" data-v-678f463b><div class="left" data-v-678f463b><a href="https://github.com/surmon-china" rel="external nofollow noopener" target="_blank" class="item github" data-v-678f463b><i class="iconfont icon-github" data-v-678f463b></i><span class="text" data-v-678f463b>surmon-china</span></a><span class="dot" data-v-678f463b>/</span><a href="https://github.com/surmon-china/vue-touch-ripple" rel="external nofollow noopener" target="_blank" class="item repository" data-v-678f463b><span class="text" data-v-678f463b>vue-touch-ripple</span></a></div><div class="right" data-v-678f463b><button class="item theme" title="System theme" data-v-678f463b><i class="icon-system-theme iconfont" data-v-678f463b></i></button><div class="item project" data-v-678f463b><span class="text" data-v-678f463b>Projects</span><i class="iconfont icon-arrow-down" data-v-678f463b></i><div class="mask" data-v-678f463b></div><div class="projects" data-v-678f463b><div class="container" data-v-678f463b><div class="loading" data-v-678f463b data-v-0c9f81db><div class="animation" data-v-0c9f81db><!--[--><div data-v-0c9f81db></div><div data-v-0c9f81db></div><div data-v-0c9f81db></div><div data-v-0c9f81db></div><div data-v-0c9f81db></div><!--]--></div></div></div></div></div></div></div></header><div id="share" data-v-7c10dc62 data-v-154fd519><button class="share-button" title="Share to Twitter" data-v-154fd519><i class="iconfont icon-twitter-x" data-v-154fd519></i><span class="text" data-v-154fd519>Tweet</span></button></div><div id="toolbox" class="toolbox" data-v-7c10dc62 data-v-7bf94a39><div class="container" data-v-7bf94a39><div class="tools" data-v-7bf94a39><a href="https://github.com/sponsors/surmon-china" rel="external nofollow noopener" target="_blank" class="item sponsor" data-v-7bf94a39><i class="iconfont icon-heart" data-v-7bf94a39></i><i class="iconfont icon-heart-fill" data-v-7bf94a39></i></a><a href="https://github.com/surmon-china/vue-touch-ripple" rel="external nofollow noopener" target="_blank" class="item github" title="to GitHub homepage" data-v-7bf94a39><i class="iconfont icon-github" data-v-7bf94a39></i></a><button class="item to-top" data-v-7bf94a39><i class="iconfont icon-arrow-up" data-v-7bf94a39></i></button></div></div></div><!--[--><main class="homepage" data-v-909800f6><!----><div class="banner" data-v-909800f6 data-v-03c52228><div class="banner-content" data-v-03c52228><div class="title-skeleton" data-v-03c52228><div class="skeleton" style="border-radius:2px;" data-v-03c52228 data-v-7aefffbb></div></div><div class="subtitle-skeleton" data-v-03c52228><div class="skeleton" style="border-radius:2px;" data-v-03c52228 data-v-7aefffbb></div></div><div class="buttons-skeleton" data-v-03c52228><!--[--><div class="item-skeleton" data-v-03c52228><div class="skeleton" style="border-radius:2px;" data-v-03c52228 data-v-7aefffbb></div></div><div class="item-skeleton" data-v-03c52228><div class="skeleton" style="border-radius:2px;" data-v-03c52228 data-v-7aefffbb></div></div><div class="item-skeleton" data-v-03c52228><div class="skeleton" style="border-radius:2px;" data-v-03c52228 data-v-7aefffbb></div></div><div class="item-skeleton" data-v-03c52228><div class="skeleton" style="border-radius:2px;" data-v-03c52228 data-v-7aefffbb></div></div><!--]--></div></div></div><div class="container" data-v-909800f6><!----><!--[--><div class="examples" data-v-cb6e1e68><!--teleport start--><!--teleport end--><!--[--><div class="example-item" data-v-cb6e1e68><div class="homepage-card" data-v-cb6e1e68 data-v-84eeb999><div class="header" data-v-84eeb999><span data-v-84eeb999>Customize element</span><!--[--><div class="actions" data-v-cb6e1e68><!--[--><!--]--><button class="code-button" data-v-cb6e1e68><i class="iconfont icon-code" data-v-cb6e1e68></i></button></div><!--]--></div><div class="content" data-v-84eeb999><!--[--><!--[--><div class="touch-ripple-example"><div class="example" data-v-24ec8a98><div class="v-touch-ripple touch-ripple" style="clip-path:none;background-color:#ea4aaa;" data-v-24ec8a98><!--[--><span data-v-24ec8a98>content</span><!--]--><div class="ripples"></div></div><div class="tools" data-v-24ec8a98><p class="item" data-v-24ec8a98><label for="color" data-v-24ec8a98>color: (#ffffff)</label><input type="color" id="color" name="color" value="#ffffff" data-v-24ec8a98></p><p class="item" data-v-24ec8a98><label for="opacity" data-v-24ec8a98>opacity: (0.4)</label><input type="range" id="opacity" min="0.1" max="0.9" step="0.1" value="0.4" data-v-24ec8a98></p><p class="item" data-v-24ec8a98><label for="transition" data-v-24ec8a98>transition:</label><select name="transition" id="transition" data-v-24ec8a98><!--[--><option value="linear" data-v-24ec8a98>linear</option><option value="ease-in" data-v-24ec8a98>ease-in</option><option value="ease-out" data-v-24ec8a98>ease-out</option><option value="steps(8, end)" data-v-24ec8a98>steps(8, end)</option><option value="cubic-bezier(.29, 1.01, 1, -0.68)" data-v-24ec8a98>cubic-bezier(.29, 1.01, 1, -0.68)</option><option value="cubic-bezier(1, -0.24, 0, 1.92)" data-v-24ec8a98>cubic-bezier(1, -0.24, 0, 1.92)</option><!--]--></select></p><p class="item" data-v-24ec8a98><label for="duration" data-v-24ec8a98>duration: (400)</label><input type="range" id="duration" min="100" max="2000" step="100" value="400" data-v-24ec8a98></p><p class="item" data-v-24ec8a98><label for="keepLastRipple" data-v-24ec8a98>keep last ripple:</label><input id="keepLastRipple" type="checkbox" checked data-v-24ec8a98></p><div class="divider" data-v-24ec8a98></div><p class="item" data-v-24ec8a98><label for="background" data-v-24ec8a98>background:</label><input type="color" id="background" name="background" value="#ea4aaa" data-v-24ec8a98></p><p class="item" data-v-24ec8a98><svg height="0" width="0" viewBox="0 0 100 100" data-v-24ec8a98><clipPath id="heart" clipPathUnits="objectBoundingBox" transform="scale(0.01, 0.01)" data-v-24ec8a98><path d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" data-v-24ec8a98></path></clipPath></svg><label for="clipPath" data-v-24ec8a98>CSS clip path:</label><select name="clipPath" id="clipPath" data-v-24ec8a98><!--[--><option value="none" data-v-24ec8a98>none</option><option value="circle(50% at 50% 50%)" data-v-24ec8a98>circle(50% at 50% 50%)</option><option value="url(#heart)" data-v-24ec8a98>url(#heart)</option><option value="polygon(50% 0%, 0% 100%, 100% 100%)" data-v-24ec8a98>polygon(50% 0%, 0% 100%, 100% 100%)</option><option value="polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)" data-v-24ec8a98>polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)</option><option value="polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%)" data-v-24ec8a98>polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%)</option><option value="polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%)" data-v-24ec8a98>polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%)</option><option value="polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)" data-v-24ec8a98>polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)</option><option value="polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%)" data-v-24ec8a98>polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%)</option><!--]--></select></p></div></div></div><!--]--><!--]--></div></div><!----></div><div class="example-item" data-v-cb6e1e68><div class="homepage-card" data-v-cb6e1e68 data-v-84eeb999><div class="header" data-v-84eeb999><span data-v-84eeb999>Image element</span><!--[--><div class="actions" data-v-cb6e1e68><!--[--><!--]--><button class="code-button" data-v-cb6e1e68><i class="iconfont icon-code" data-v-cb6e1e68></i></button></div><!--]--></div><div class="content" data-v-84eeb999><!--[--><!--[--><div class="touch-ripple-example"><div class="example" data-v-41db188f><div class="v-touch-ripple image-box" data-v-41db188f><!--[--><img class="image" draggable="false" src="/images/example/1.jpg" data-v-41db188f><!--]--><div class="ripples"></div></div><div class="v-touch-ripple image-box" data-v-41db188f><!--[--><img class="image" draggable="false" src="/images/example/2.jpg" data-v-41db188f><!--]--><div class="ripples"></div></div><div class="v-touch-ripple image-box" data-v-41db188f><!--[--><img class="image" draggable="false" src="/images/example/3.jpg" data-v-41db188f><!--]--><div class="ripples"></div></div></div></div><!--]--><!--]--></div></div><!----></div><div class="example-item" data-v-cb6e1e68><div class="homepage-card" data-v-cb6e1e68 data-v-84eeb999><div class="header" data-v-84eeb999><span data-v-84eeb999>Button element</span><!--[--><div class="actions" data-v-cb6e1e68><!--[--><!--]--><button class="code-button" data-v-cb6e1e68><i class="iconfont icon-code" data-v-cb6e1e68></i></button></div><!--]--></div><div class="content" data-v-84eeb999><!--[--><!--[--><div class="touch-ripple-example"><div class="example" data-v-1046df52><div class="v-touch-ripple" data-v-1046df52><!--[--><button class="button b-1" data-v-1046df52>duration = 200</button><!--]--><div class="ripples"></div></div><div class="v-touch-ripple" data-v-1046df52><!--[--><button class="button b-2" data-v-1046df52>duration = 600; color = #3d8b16</button><!--]--><div class="ripples"></div></div><div class="v-touch-ripple" data-v-1046df52><!--[--><button class="button b-3" data-v-1046df52>Warning button</button><!--]--><div class="ripples"></div></div><div class="v-touch-ripple" data-v-1046df52><!--[--><button class="button b-4" data-v-1046df52>Danger button</button><!--]--><div class="ripples"></div></div><div class="v-touch-ripple" data-v-1046df52><!--[--><button class="button b-5" data-v-1046df52>color = #303133</button><!--]--><div class="ripples"></div></div></div></div><!--]--><!--]--></div></div><!----></div><div class="example-item" data-v-cb6e1e68><div class="homepage-card" data-v-cb6e1e68 data-v-84eeb999><div class="header" data-v-84eeb999><span data-v-84eeb999>Typography element</span><!--[--><div class="actions" data-v-cb6e1e68><!--[--><!--]--><button class="code-button" data-v-cb6e1e68><i class="iconfont icon-code" data-v-cb6e1e68></i></button></div><!--]--></div><div class="content" data-v-84eeb999><!--[--><!--[--><div class="touch-ripple-example"><div class="example" data-v-b9de135a><div class="v-touch-ripple typography-box" data-v-b9de135a><!--[--><h1 data-v-b9de135a>Talk is cheap. Show me the code.</h1><!--]--><div class="ripples"></div></div><div class="v-touch-ripple typography-box" data-v-b9de135a><!--[--><p data-v-b9de135a>Stay hungry. Stay foolish.</p><!--]--><div class="ripples"></div></div><p class="typography-box" data-v-b9de135a><span data-v-b9de135a>Because</span><div class="v-touch-ripple inline-typography" data-v-b9de135a><!--[--><strong class="red" data-v-b9de135a>the mountain</strong><!--]--><div class="ripples"></div></div><span data-v-b9de135a>was there.</span></p></div></div><!--]--><!--]--></div></div><!----></div><div class="example-item" data-v-cb6e1e68><div class="homepage-card" data-v-cb6e1e68 data-v-84eeb999><div class="header" data-v-84eeb999><span data-v-84eeb999>Cubic Bezier</span><!--[--><div class="actions" data-v-cb6e1e68><!--[--><!--]--><button class="code-button" data-v-cb6e1e68><i class="iconfont icon-code" data-v-cb6e1e68></i></button></div><!--]--></div><div class="content" data-v-84eeb999><!--[--><!--[--><div class="touch-ripple-example"><div class="example" data-v-8637a79b><div class="v-touch-ripple box box-1" data-v-8637a79b><!--[--><code data-v-8637a79b>cubic-bezier(0.18, 0.89, 0.32, 1.28)</code><!--]--><div class="ripples"></div></div><div class="v-touch-ripple box box-2" data-v-8637a79b><!--[--><code data-v-8637a79b>cubic-bezier(0.6, -0.28, 0.74, 0.05)</code><!--]--><div class="ripples"></div></div><div class="v-touch-ripple box box-3" data-v-8637a79b><!--[--><code data-v-8637a79b>cubic-bezier(0.89, 0.24, 0, 0.94)</code><!--]--><div class="ripples"></div></div><div class="v-touch-ripple box box-4" data-v-8637a79b><!--[--><code data-v-8637a79b>cubic-bezier(1, -0.24, 0, 1.92)</code><!--]--><div class="ripples"></div></div></div></div><!--]--><!--]--></div></div><!----></div><!--]--></div><!--]--><!----></div></main><!--]--><footer class="footbar" data-v-7c10dc62 data-v-6630103c><div class="container" data-v-6630103c><span class="footer-content" data-v-6630103c><a href="https://github.com/surmon-china/vue-touch-ripple" rel="external nofollow noopener" target="_blank" data-v-6630103c>vue-touch-ripple</a><span data-v-6630103c> is maintained by </span><a href="https://github.com/surmon-china" rel="external nofollow noopener" target="_blank" data-v-6630103c>@surmon-china</a></span></div></footer></div></div>
  

</body>
</html>
